<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>模拟ajax操作</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app">
	<h3>用户注册（已存在的判断）</h3>
	<p>已存在的账号：{{userList}}</p>
	<p>已存在的账号：{{emailList}}</p>
	<p>
		<label>账号：
			<!-- lazy表示惰性加载 -->
			<input type="text" v-model.lazy.trim="name" @input="input" @keyup.delete="resumeName">
			<span v-show="nameError" :style="error">{{name}}该账号已存在。</span>
		</label>
	</p>
	<p>
		<label for="email">邮箱：</label>
		<input type="text" id="email" v-model.lazy.trim="email" @input="input" @keyup.delete="resumeEmail">
		<span v-show="emailError" :style="error">{{email}}该邮箱已存在。</span>
	</p>
	<p>
		<button @click="submit">登录</button>
		<span :style="error">{{tips}}</span>
	</p>
</div>

</body>
<script>
const HelloVueApp = {
	data(){
		return{
			//账号
			name: '',
			
			//邮箱
			email: '',
			
			//用户名验证提示显示状态
			nameError: false,
			
			//邮箱验证提示显示状态
			emailError: false,
			
			//设置错误信息的文本样式
			error: {color: 'red'},
			
			//登录提示信息
			tips: '',
			
			//已存在用户名列表
			userList: ['admin', 'tom', 'zhu'],
			
			//已注册的邮箱列表
			emailList: ['admin@html.com', 'tom@html.com', 'zhu@html.com'],
		}
	},
	//监听器
	watch:{
		//监听用户名的更新
		name:function(value){
			//遍历用户名列表，如果冲突，则提示用户，并重置焦点
			var THIS = this;
			this.userList.forEach(function(userName){
				if(userName === value){
					THIS.nameError = true;
					document.getElementsByTagName('input')[0].focus();
				}
			})
		},
		//监听邮箱的更新
		email:function(value){
			//遍历用户名列表，如果冲突，则提示用户，并重置焦点
			var THIS = this;
			this.emailList.forEach(function(emailName){
				if(emailName === value){
					THIS.emailError = true;
					document.getElementsByTagName('input')[1].focus();
				}
			})
		}
	},
	methods:{
		submit:function(){
			//非空判断
			if(this.name.length === 0 || this.email.length === 0){
				this.tips = '用户名和邮箱不能为空';
				document.getElementsByTagName('input')[0].focus();
			}else if(this.nameError === false && this.emailError === false){
				this.error = {color: 'green'};
				this.tips = '验证通过，正在跳转...';
				setTimeout(function(){
					location.href = 'v_for.html';
				}, 1000);
			}else{
				this.tips = '用户名或邮箱错误';
			}
			
		},
		input:function(){
			this.tips = '';
		},
		
		//按下删除或退格键触发
		resumeName:function(){
			this.nameError = false;
		},
		resumeEmail:function(){
			this.emailError = false;
		}
		
	}
	
}
var vm = Vue.createApp(HelloVueApp).mount('#app');
</script>
</html>